<template>
  <view class="addreport" style="height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #009EF0;
	background: url('../../../static/image/background1.png') no-repeat center;
	background-size: cover;">
    <view class="title">
      <text>新建上报</text>
    </view>
    <view class="main">
      <view class="depart">
        <text style="color:#eee">所属部门</text>
        <text>{{option.departmentName}}</text>
      </view>
      <view class="reportuser">
        <text style="color:#eee">上报人</text>
        <picker @change="bindPickerChange" :range="userList" range-key="userName">
          <view class="uni-input">{{params.userName || "请选择上报人"}}</view>
        </picker>
      </view>
      <view class="reporttime">
        <text style="color:#eee">上报时间</text>
        <picker mode="date" :value="nowDate" @change="bindDateChange">
          <view class="uni-input">{{params.reportTime || "请选择日期"}}</view>
        </picker>
      </view>
      <view class="adress">
        <text style="color:#eee">详细地址</text>
        <input
          v-model="params.address"
          class="uni-input"
          style="font-size:12px"
          placeholder-style="font-size:12px;text-align:right;color:#fff"
          focus
          placeholder="请输入详细地址"
        />
      </view>
      <view class="imginfo">
        <text style="font-size:12px;color:#fff;margin-bottom:10px;">情况说明</text>
        <input
          v-model="params.reason"
          class="uni-input"
          placeholder-style="font-size:12px;text-align:left;color:#bcbcbc"
          placeholder="请输入情况描述或点击下方上传按钮上传图片"
        />
        <view class="uploadImg">
          <image v-if="params.imageUrl" :src="params.imageUrl" />
          <image :src="require('../../../static/image/upload_img.png')" @click="upload(0)" />
        </view>
      </view>
      <view class="vidioinfo">
        <text style="font-size:12px;color:#fff;margin-bottom:10px;">视频说明</text>
        <text style="font-size:12px;color:#bcbcbc">请点击下方按钮上传视频</text>
        <view class="uploadImg">
          <image :src="require('../../../static/image/upload_video.png')" @click="upload(1)" />
        </view>
        <text v-if="params.videoUrl" style="font-size:12px;color:#fff;">已上传视频：{{videoText}}</text>
      </view>
    </view>
    <view class="submit">
      <button type="primary" class="btn" @click="add">确定上传情况</button>
    </view>
  </view>
</template>

<script>
import rup from "@/common/request/request-upFiles.js";
import { ajax } from "../../../api/apis";
rup.defaultUp.url = "http://125.70.231.243:43090";
export default {
  data() {
    return {
      option: {},
      userList: [],
      params: {
        reportTime: "",
        reportUser: "",
        userName: "",
        address: "",
        reason: "",
        imageUrl: "",
        videoUrl: ""
      }
    };
  },
  computed: {
    videoText() {
      const arr = this.params.videoUrl ? this.params.videoUrl.split("/") : [""];
      return arr[arr.length - 1];
    },
    nowDate() {
      const date = new Date();
      return (
        date.getFullYear() + "-" + (date.getMonth + 1) + "-" + date.getDate()
      );
    }
  },
  methods: {
    onLoad(option) {
      this.option = option;
      this.params.warningMessageId = option.warningMessageID;
      ajax({
        url: "/user/getSimpleUserByDepartmentID",
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: {
          departmentID: option.departmentId
        },
        success: res => {
          if (res.data.state == 1) {
            this.userList = res.data.data;
          }
        }
      });
      let id = this.option.warningMessageID;
      ajax({
        url: "/reportList/getReportInfo",
        method: "GET",
        data: { id },
        success: res => {
          const obj = res.data.data;
          console.log(obj);
          if (obj) {
            this.params.reportTime = obj.reportTime;
            this.params.address = obj.address;
            this.params.reason = obj.reason;
            this.params.imageUrl = obj.imageUrl;
            this.params.videoUrl = obj.videoUrl;
            this.params.reportUser = obj.reportId;
            this.params.userName = obj.userName;
          }
        }
      });
    },
    bindDateChange(e) {
      this.params.reportTime = e.target.value;
    },
    bindPickerChange(e) {
      const obj = this.userList[e.target.value];
      this.params.reportUser = obj.userID;
      this.params.userName = obj.userName;
    },
    add() {
      ajax({
        url: "/reportList/add",
        method: "POST",
        data: this.params,
        success: res => {
          uni.showToast({
            title:"上报情况成功！"
          })
          uni.navigateBack();
        }
      });
    },
    async upload(type) {
      try {
        const res = await rup.selectFiles({
          type,
          upload: {
            path: "/savefile",
            files: ["uploadfile"],
            title: "正在上传",
            extra: {
              filetype: type == 0 ? "picture" : "video"
            }
          }
        });
        if (res.upres.length) {
          const result = JSON.parse(res.upres[0].data);
          const url = result.data.file_url;
          if (url) {
            switch (type) {
              case 0:
                this.params.imageUrl = url;
                break;
              case 1:
                this.params.videoUrl = url;
                break;
              default:
                break;
            }
          }
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style scoped>
uni-page-body {
  height: 100%;
}
.addreport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 16px;
  padding: 15px;
  color: #fff;
  text-align: center;
  background: url("../../../static/image/navbg.png") no-repeat center;
}
.main {
  flex: 1;
  background: none;
}
.adress,
.depart,
.reportuser,
.reporttime {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #fff; */
  /* margin-bottom: 2px; */
  border-bottom: 2px solid #ccc;
  padding: 12px 30px;
  font-size: 12px;
  color: #fff;
  text-align: right;
}
.imginfo,
.vidioinfo {
  padding: 12px 30px;
  line-height: 24px;
  /* background: #fff; */
}
.imginfo {
  display: flex;
  flex-direction: column;
  /* margin-bottom: 2px; */
  border-bottom: 2px solid #ccc;
}
.vidioinfo {
  display: flex;
  flex-direction: column;
}
.submit {
	margin: 0 auto;
	width: 100%;
  position: fixed;
  bottom: 21px;
}
.btn {
  width: 203px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background-color: #009ff1;
  font-size: 14px;
  box-shadow: 0px 5px 10px #ccc;
}
.small {
  width: 100px;
}

/* 上传图片样式 */
.uploadImg {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.uploadImg image {
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
</style>